;
(function() {
  new Vue({
    el: '#useManage1',
    data: {
      quanxian: JSON.parse(localStorage.getItem('permissions')),
      flag: false,
      editFlag: false,
      useFlag: false,
      lData: [],
      tabConfigType: '',
      tabConfigTypeArr: [],
      imgURL: '',
      useTitle: '新增',
      templateId: '',
      tagApplysDtArr: [],
      parentId: '0',
      contentAttributeArr: [],
      sonApplysArr: [],
      tagsArr: [],
      tagSubArr: [],
      microappNamesArr: [],
      tagId: '#',
      parentTagId: '',
      activeTagId: '',
      selTagId: '',
      selRuleObj: {
        row: '',
        col: ''
      },
      tagName: '',
      applyId: '',
      sonTagNameId: '#',
      microappNameId: '#',
      elementType: '#',
      slaveApplicationId: '#',
      layoutArr: [],
      useArr: [],
      tagAllArr: [],
      editTag: {
        id: '',
        name: '',
        seq: ''
      },
      editUse: {
        seq: '',
        id: '',
        name: ''
      },
      params: {
        icon: '',
        parentId: '',
        tagId: '',
        elementType: '',
        elementName: '',
        seq: '',
        agentId: '',
        procId: '',
        link: '',
        microappId: ''
      },
      subElementArr: [],
      contentAllArr: [],
      configType: '',
      blockId: '',
      ops: {
        bar: {
          background: '#c1c1c1'
        }
      }
    },
    methods: {
      // 图片上传触发事件
      updateImg() {
        document.querySelector('.updateImg').click()
      },
      //租户模版获取
      applyTagsDt() {
        hlhttp.get({
          url: 'portal/template',
          success: (data) => {
            this.templateId = data.templateId;
            this.applytagsGet()
            this.tagsDt()
            this.sonApplysDt()
            this.nowTagAllMicroappTags()
          }
        })
      },
      //应用标签获取
      applytagsGet() {
        hlhttp.get({
          url: 'portal/microapp_tags',
          data: {
            template_id: this.templateId,
            parent_id: '0',
            block_id: this.blockId,
            tag_name_id: this.tagId,
            son_tag_name_id: this.sonTagNameId,
            microapp_name_id: this.microappNameId,
            element_type: this.elementType,
            slave_application_id: this.slaveApplicationId
          },
          success: (data) => {
            this.lData = data.tagList;
            if (data.tagInfoList) {
              this.contentAllArr.map(item => {
                data.tagInfoList.map(item0 => {
                  if (item.dictCode == item0.elementType) {
                    item0.elementType = item.dictName;
                  }
                })
              })
              this.tagApplysDtArr = data.tagInfoList;
            }
            if (!data.tagInfoList) {
              this.tagApplysDtArr = []
            }
          }
        })
      },
      //应用标签列表获取
      tagsDt() {
        hlhttp.get({
          url: 'portal/microapp_tags',
          data: {
            template_id: this.templateId,
            parent_id: this.parentId,
            tag_name_id: this.tagId,
            block_id: this.blockId,
            son_tag_name_id: '#',
            microapp_name_id: '#',
            element_type: '#',
            slave_application_id: '#'
          },
          success: (data) => {
            this.tagsArr = data.tagList;
          }
        })
      },
      //子标签
      tagSubDt(data) {
        this.tagId = data.tagId;
        hlhttp.get({
          url: 'portal/microapp_tags',
          data: {
            template_id: this.templateId,
            parent_id: data.tagId,
            block_id: this.blockId,
            tag_name_id: '#',
            son_tag_name_id: '#',
            microapp_name_id: '#',
            element_type: '#',
            slave_application_id: '#'
          },
          success: (data) => {
            this.tagSubArr = data.tagList;
          }
        })
      },
      //获取子标签 ID
      subTag(data) {
        this.parentId = data.tagId;
        this.sonTagNameId = data.tagId;
      },
      //应用名称列表获取
      microappNamesDt() {
        hlhttp.get({
          url: 'portal/microapp_names',
          success: (data) => {
            this.microappNamesArr = data;
          }
        })
      },
      //编辑标题、备注、排序
      tagShow(data) {
        this.flag = true;
        this.editTag = {
          id: data.tagId,
          name: data.tagName,
          seq: data.seq
        }
      },
      tagHide() {
        this.flag = false;
        this.editTag = {
          id: '',
          name: '',
          seq: ''
        }
      },
      tagPut() {
        hlhttp.put({
          url: 'portal/tag',
          data: {
            tag_id: this.editTag.id,
            name: this.editTag.name,
            memo: '#',
            seq: this.editTag.seq
          },
          success: (data) => {
            this.flag = false;
            if (this.tagId != '#') {
              this.$refs.tagName.innerHTML = this.editTag.name;
              hlUrlUtil.addURLParam({
                name: escape(this.editTag.name)
              })
            }
            this.applytagsGet()
          }
        })
      },
      //获取标签详细信息列表
      tagApplysDt(data) {
        this.activeTagId = data.tagId;
        hlhttp.get({
          url: 'portal/tag_applys',
          data: {
            template_id: this.templateId,
            tag_id: data.tagId
          },
          success: (data) => {
            this.contentAllArr.map(item => {
              data.map(item0 => {
                if (item.dictCode == item0.elementType) {
                  item0.elementType = item.dictName;
                }
              })
            })
            this.tagApplysDtArr = data
          }
        })
      },
      //门户页面内容属性字典
      contentConfig() {
        hlhttp.get({
          url: 'configure/dict',
          data: {
            module_code: 'MNHU',
            config_name: 'MNHU_PAGE_ELEMENT_TYPE'
          },
          success: (data) => {
            this.contentAttributeArr = data;
            let arr = [];
            data.map(item => {
              if (item.configType == 'BASE_VALUE') {
                item.parentFlag = false;
                arr.push(item)
              }
              if (item.configType == 'JSON_VALUE') {
                JSON.parse(item.dictValue).value.map(item0 => {
                  item0.parentFlag = true;
                  item0.parentName = item.dictName;
                  arr.push(item0)
                })
              }
            })
            this.contentAllArr = arr;
          }
        })
      },
      //应用布局配置
      layoutDt() {
        hlhttp.get({
          url: 'configure/dict',
          data: {
            module_code: 'MNHU',
            config_name: 'MNHU_PAGE_DEFAULT_LAYOUT_LIST'
          },
          success: (data) => {
            this.layoutArr = data;
          }
        })
      },
      //应用从属，获取类型是应用列表的应用
      sonApplysDt() {
        hlhttp.get({
          url: 'portal/son_applys',
          success: (data) => {
            this.sonApplysArr = data;
          }
        })
      },
      //显示隐藏应用
      editUseShow(data) {
        this.parentTagId = data.parentTagId;
        this.editFlag = true;
        hlhttp.get({
          url: 'portal/microapp_info',
          data: {
            microapp_id: data.elementId
          },
          success: (res) => {
            this.$refs.nowTag.innerHTML = res.tagName;
            this.$refs.subordinate.innerHTML = res.microappParentName ? res.microappParentName : '非必填';
            this.contentAllArr.map(item => {
              if (item.dictCode == res.elementType) {
                if (item.parentFlag) {
                  this.configType = 'JSON_VALUE';
                  this.$refs.nature.innerHTML = item.parentName;
                  setTimeout(() => {
                    this.$refs.nature0.innerHTML = item.dictName;
                  }, 50)
                }
                if (!item.parentFlag) {
                  this.configType = 'BASE_VALUE';
                  this.$refs.nature.innerHTML = item.dictName;
                }
              }
            })

            if (data.icon) {
              this.imgURL = data.icon
            }
            this.params = {
              icon: res.icon,
              parentId: res.microappParentId,
              tagId: res.taId,
              elementType: res.elementType,
              elementName: res.microappName,
              seq: res.seq,
              agentId: res.agentId,
              procId: res.procId || '',
              link: res.link,
              microappId: res.microappId
            }
          }
        })
      },
      //显示
      addShow() {
        this.editFlag = true;
      },
      //验证
      validate() {
        if (!this.params.icon) {
          hl.toast('请上传图标')
          return false;
        }
        if (!this.params.elementType) {
          hl.toast('请选择内容属性')
          return false;
        }
        if (!this.params.seq) {
          hl.toast('请填写应用排序')
          return false;
        }
        if (!this.params.seq) {
          hl.toast('请填写应用名称')
          return false;
        }
        return true;
      },
      // 新增应用（注意不同内容属性对应不同的关联参数）
      applyPost() {
        if (!this.validate()) return;
        hlhttp.post({
          url: 'portal/microapp',
          data: {
            "icon": this.params.icon, //应用icon
            "parent_id": this.params.parentId ? this.params.parentId : '#', //从属应用父节点ID
            "tag_id": this.params.tagId, //标签ID
            "element_type": this.params.elementType, //内容属性
            "element_name": this.params.elementName, //应用名称
            "seq": this.params.seq, //排序字段
            "agent_id": this.params.agentId ? this.params.agentId : '#', //企业微应用id,无传#
            "proc_id": this.params.procId ? this.params.procId : '#', //钉钉流程id,无传#
            "link": this.params.link ? this.params.link : '#', //链接地址,无传#
            "microapp_id": "#" //应用ID，新增时#
          },
          success: (data) => {
            this.editFlag = false;
            this.tagApplysDt({
              tagId: this.parentTagId
            })
            this.hideAddEditUse()
            this.sonApplysDt()
          }
        })
      },
      // 编辑应用（注意不同内容属性对应不同的关联参数）
      applyPut() {
        if (!this.validate()) return;
        hlhttp.post({
          url: 'portal/microapp',
          data: {
            "icon": this.params.icon, //应用icon
            "parent_id": this.params.parentId ? this.params.parentId : '#', //从属应用父节点ID
            "tag_id": this.params.tagId, //标签ID
            "element_type": this.params.elementType, //内容属性
            "element_name": this.params.elementName, //应用名称
            "seq": this.params.seq, //排序字段
            "agent_id": this.params.agentId ? this.params.agentId : '#', //企业微应用id,无传#
            "proc_id": this.params.procId ? this.params.procId : '#', //钉钉流程id,无传#
            "link": this.params.link ? this.params.link : '#', //链接地址,无传#
            "microapp_id": this.params.microappId //应用ID，新增时#
          },
          success: (data) => {
            this.editFlag = false;
            this.tagApplysDt({
              tagId: this.parentTagId
            })
            this.hideAddEditUse()
            this.sonApplysDt()
          }
        })
      },
      //应用逻辑删除
      applyDel(data) {
        hllayer.confirm('此操作不可逆，确认删除吗？', () => {
          hlhttp.delete({
            url: 'portal/microapp?microapp_id=' + data.elementId,
            success: (res) => {
              hl.toast('操作成功')
              this.tagApplysDt({
                tagId: data.parentTagId
              })
              this.sonApplysDt()
            }
          })
        })
      },
      //应用显示、隐藏
      setApplyVisiable(data) {
        let visiable = data.visiable == '1' ? '0' : '1';
        hlhttp.put({
          url: 'portal/set_microapp_visible',
          data: {
            microapp_id: data.elementId,
            microapp_visible: visiable
          },
          success: (res) => {
            this.tagApplysDt({
              tagId: data.parentTagId
            })
          }
        })
      },
      //标签显示、隐藏
      setTagVisiable(data) {
        let visiable = data.visiable == '1' ? '0' : '1';

        hlhttp.put({
          url: 'portal/set_tag_visiable',
          data: {
            tag_id: data.tagId,
            tag_visiable: visiable
          },
          success: (data) => {
            this.applytagsGet()
          }
        })
      },
      //应用布局配置（新增/编辑）
      pageLayoutPut() {
        hlhttp.post({
          url: 'portal/page_layout',
          data: {
            template_id: this.templateId,
            tag_id: this.selTagId,
            row_num: this.selRuleObj.row,
            col_num: this.selRuleObj.col
          },
          success: (data) => {
            this.hideLayout()
          }
        })
      },
      //重置
      resetDt() {
        this.parentId = '0'
        this.tagId = '#'
        this.activeTagId = '';
        this.sonTagNameId = '#'
        this.microappNameId = '#'
        this.elementType = '#'
        this.slaveApplicationId = '#';
        this.tabConfigType = ''
        this.$refs.tagName.innerHTML = '请选择'
        this.$refs.subTag.innerHTML = '请选择'
        this.$refs.useName.innerHTML = '请选择'
        this.$refs.contentAttribute.innerHTML = '请选择'
        this.$refs.slaveUse.innerHTML = '请选择';
        this.tagSubArr = [];
        this.applytagsGet()
        this.tagsDt()
      },
      //关闭新增编辑应用
      hideAddEditUse() {
        this.$refs.nowTag.innerHTML = '请选择';
        if (this.$refs.subordinate) {
          this.$refs.subordinate.innerHTML = '请选择';
        }
        this.$refs.nature.innerHTML = '请选择';
        if (this.$refs.nature0) {
          this.$refs.nature0.innerHTML = '请选择';
        }
        this.params = {
          icon: '',
          parentId: '',
          tagId: '',
          elementType: '',
          elementName: '',
          seq: '',
          agentId: '',
          procId: '',
          link: '',
          microappId: ''
        }
        this.configType = ''
        this.editFlag = false;
      },
      //设置所在标签
      setTag(item) {
        this.parentTagId = item.parentTagId != '0' ? item.parentTagId : item.tagId;
        this.params.tagId = item.tagId;
      },
      //设置应用从属
      setParentId(item) {
        this.params.parentId = item.parentId;
      },
      //设置内容属性
      setElementType(item) {
        if (this.params.elementType == item.dictCode) return;
        this.params.parentId = '';
        this.params.link = '';
        this.params.procId = '';
        this.params.agentId = '';
        this.configType = item.configType;
        if (item.configType == 'BASE_VALUE') {
          this.params.elementType = item.dictCode;
        }
        if (item.configType == "JSON_VALUE") {
          this.params.elementType = '';
          this.subElementArr = JSON.parse(item.dictValue).value;
        }
        setTimeout(() => {
          this.$refs.nature0.innerHTML = '请选择'
        }, 30)
      },
      setSubElementType(item) {
        this.params.elementType = item.dictCode;
      },
      //设置从属id
      setSlaveApplicationId(item) {
        this.slaveApplicationId = item.parentId
      },
      //设置内容属性id
      setElementType0(item) {
        if (item.configType == 'BASE_VALUE') {
          this.tabConfigType = 'BASE_VALUE'
          this.elementType = item.dictCode
        }
        if (item.configType == 'JSON_VALUE') {
          this.tabConfigType = 'JSON_VALUE'
          this.tabConfigTypeArr = JSON.parse(item.dictValue).value
        }
      },
      setElementType1(item) {
        this.elementType = item.dictCode
      },
      //设置内容属性id
      setMicroappNameId(item) {
        this.microappNameId = item.microappId
      },
      //所在标签
      nowTagAllMicroappTags() {
        hlhttp.get({
          url: 'portal/get_all_tags',
          data: {
            template_id: this.templateId
          },
          success: (data) => {
            this.tagAllArr = data;
          }
        })
      },
      //应用布局显示
      useLayout() {
        this.useFlag = true;
      },
      //关闭布局
      hideLayout() {
        this.$refs.useLabel.innerHTML = '请选择'
        this.$refs.layoutName.innerHTML = '请选择'
        this.selRuleObj = {
          row: '',
          col: ''
        };
        this.selTagId = '';
        this.useFlag = false;
      },
      //选择
      selTagIdEd(item) {
        this.selTagId = item.tagId;
        this.layouInfo(item)
      },
      //应用布局详情
      layouInfo(item) {
        hlhttp.get({
          url: 'portal/page_layout',
          data: {
            template_id: this.templateId,
            tag_id: item.tagId
          },
          success: (data) => {
            this.layoutArr.map(item => {
              if (data.colNum == JSON.parse(item.dictValue).value.col_num) {
                this.$refs.layoutName.innerHTML = item.dictName
                this.selRuleObj = {
                  row: data.rowNum ? data.rowNum : '#',
                  col: data.colNum
                }
              }
            })
            if (!data.colNum) {
              this.$refs.layoutName.innerHTML = '请选择'
            }
          }
        })
      },
      //布局规则
      selRule(item) {
        let data = JSON.parse(item.dictValue).value;
        this.selRuleObj = {
          row: data.row_num,
          col: data.col_num
        }
      }
    },
    mounted() {
      hlSelectUi()
      this.applyTagsDt()
      this.microappNamesDt()
      this.contentConfig()
      this.layoutDt()
      imgupload0('.updateImg', (data) => {
        this.params.icon = data.json.url
      })

      if (hlUrlUtil.GetQueryString('blockId')) {
        this.blockId = hlUrlUtil.GetQueryString('blockId')
      }
    }
  })
}())
